<!Doctype html>
<html>
<head>

<link rel='stylesheet' href='css/bootstrap.css' type='text/css' />
<script src='js/jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function(){
	$('#reg').hide();
	$('#passfrm').hide();
	$("#content").hide();
	$('#loginLk').click(function(){
		$("#login").slideDown(3000);
		$('#reg').hide();
	});

	$('#regLk').click(function(){
		$("#reg").slideDown(3000);
		$('#login').slideUp();
	});

	$('#forgpass').click(function(){
		$("#loginfrm").hide('fast');
		$('#passfrm').show('slow');
	});

	$('#showcon').click(function(){
		
		if(document.getElementById('content').style.display=='none'){
			$("#content").show();
			$('#showcon').html('Hide Content');	
		}
		else {
			$('#showcon').html('Show Content');
			$("#content").hide();
		}
		
	});

	
});
</script>


</head>
<body>
<a href='javascript:void' id='showcon'>Show Content</a>
<div id='content'>
	<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<div class='container-fluid'>
<a href='javascript:void' class='btn btn-inverse' id='loginLk'>Login</a> | <a href='javascript:void' class='btn btn-primary' id='regLk'>Register</a>
	<div class='row-fluid'>
			<div class='span10 text-center' id='login'>
			<h2>Sing in</h2>
    <form id='loginfrm'>
 
    <label>Username</label>
    <input type="text" name="username">
    <label>Password</label>
    <input type="password" name="password">
    
    <input type="submit" value="Sign up" class="btn btn-primary pull-right">
    <a href='javascript:void' id='forgpass'>Forgot Password?</a>
    <div class="clearfix"></div>
    </form>
    
     <form id='passfrm'>
 
    <label>What is your Username</label>
    <input type="text" name="username">
    
    
    <input type="submit" value="Reset Password" class="btn btn-primary pull-right">
    <div class="clearfix"></div>
    </form>
			
			</div>
			
			<div class='span10' id='reg'>
			<h2>Sign Up</h2>
    <form>
    <label>First Name</label>
    <input type="text" name="firstname" class="span3">
    <label>Last Name</label>
    <input type="text" name="lastname" class="span3">
    <label>Email Address</label>
    <input type="email" name="email" class="span3">
    <label>Username</label>
    <input type="text" name="username" class="span3">
    <label>Password</label>
    <input type="password" name="password" class="span3">
    <label><input type="checkbox" name="terms"> I agree with the <a href="#">Terms and Conditions</a>.</label>
    <input type="submit" value="Sign up" class="btn btn-primary pull-right">
    <div class="clearfix"></div>
    </form>
			
			</div>
		
	</div>
</div>

</body>
</html>